﻿.gradient(@color-from, @color-to, @position-from, @position-to) {
    background: color-from; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url();
    background: -moz-linear-gradient(top, @color-from @position-from, @color-to @position-to); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(@position-from,@color-from), color-stop(@position-to,@color-to)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, @color-from @position-from,@color-to @position-to); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, @color-from @position-from,@color-to @position-to); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, @color-from @position-from,@color-to @position-to); /* IE10+ */
    background: linear-gradient(to bottom, @color-from @position-from,@color-to @position-to); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@color-from', endColorstr='@color-to',GradientType=0 ); /* IE6-8 */
}

html, body, div, ul, li, a, nav, header, strong, .selected {
    margin: 0;
    padding: 0;
}

#wrapper {
    width: 960px;
}

a {
    font-size: 2em;
    color: black;
    font-family: Arial;
    text-decoration: none;
    z-index: 99;
}

li.selected {
    background: rgba( 13,48,66, 0.5);
    border-radius: 15px;
}

li > a {
    display: inline-block;
    padding: 5px 10px;
}

body {
    header {
        .gradient(#002d44,#77d1ff,0%,100%);
        height: 200px;

        nav {
            padding-top: 50px;
            padding-left: 50px;

            ul {
                position: relative;
                list-style-type: none;

                li {
                    display: inline-block;
                    z-index: 98;

                    &:hover {
                        background: rgba( 13,48,66, 0.3);
                        border-radius: 15px;
                    }

                    & > ul {
                        position: relative;
                        display: none;

                        li {
                            margin-top: -5px;
                            z-index: 1;
                        }
                    }

                    ul > li:hover {
                        background: rgba( 13,48,66, 0.5);
                        border-radius: 15px;
                        position: relative;
                    }

                    ul > li > a {
                        z-index: 100;
                    }

                    &:hover > ul {
                        display: block;
                        position: absolute;
                        left: 0;
                    }

                    ul > li > ul {
                        display: none;
                        position: absolute;
                        margin-top: -5px;
                        border-radius: 15px;
                        padding: 20px;
                        background: #ffffff; /* Old browsers */
                        /* IE9 SVG, needs conditional override of 'filter' to 'none' */
                        background: url();
                        background: -moz-linear-gradient(top, #ffffff 0%, #7db9e8 100%, #ffffff 100%, #77d1ff 100%); /* FF3.6+ */
                        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#7db9e8), color-stop(100%,#ffffff), color-stop(100%,#77d1ff)); /* Chrome,Safari4+ */
                        background: -webkit-linear-gradient(top, #ffffff 0%,#7db9e8 100%,#ffffff 100%,#77d1ff 100%); /* Chrome10+,Safari5.1+ */
                        background: -o-linear-gradient(top, #ffffff 0%,#7db9e8 100%,#ffffff 100%,#77d1ff 100%); /* Opera 11.10+ */
                        background: -ms-linear-gradient(top, #ffffff 0%,#7db9e8 100%,#ffffff 100%,#77d1ff 100%); /* IE10+ */
                        background: linear-gradient(to bottom, #ffffff 0%,#7db9e8 100%,#ffffff 100%,#77d1ff 100%); /* W3C */
                        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#77d1ff',GradientType=0 ); /* IE6-8 */
                        li {
                            display: block;
                            width: 335px;
                            left: 0;
                            border-bottom: 1px solid black;

                            &:last-of-type {
                                border: none;
                            }
                        }
                    }
                }
            }
        }
    }
}
